<template>
  <GridPage title="职位发布">
    <n-card class="mt-12">
      <n-form ref="formRef" :model="form" :rules="rules">
        <n-grid :cols="24" :x-gap="24">
          <n-form-item-gi label="职位名称" path="title" :span="12">
            <n-input v-model:value="form.title" />
          </n-form-item-gi>
          <n-form-item-gi label="职位类型" path="job_code" :span="12">
            <n-input v-model:value="job_name" @click="handleOpenJobSelect" class="cursor-pointer" />
          </n-form-item-gi>
          <n-form-item-gi label="工作类型" path="type" :span="12">
            <n-select v-model:value="form.type" :options="typeOps" />
          </n-form-item-gi>

          <n-form-item-gi label="工作地点" path="address_code" :span="12">
            <n-cascader
              v-model:value="form.address_code"
              expand-trigger="hover"
              :options="cities"
              :show-path="true"
              check-strategy="child"
            />
          </n-form-item-gi>
          <n-form-item-gi label="最低月薪" path="salary_min" :span="12">
            <n-input
              v-model:value="form.salary_min"
              :allow-input="onlyAllowNumber"
              style="margin-right: 10px"
            />
            <span style="margin-right: 20px">k</span>
          </n-form-item-gi>
          <n-form-item-gi label="最高月薪" path="salary_max" :span="12">
            <n-input
              v-model:value="form.salary_max"
              :allow-input="onlyAllowNumber"
              :disabled="!form.salary_min"
              style="margin-right: 10px"
            />
            <span style="margin-right: 20px">k</span>
          </n-form-item-gi>
          <n-form-item-gi label="学历要求" path="education_requirement" :span="12">
            <n-select v-model:value="form.education_requirement" :options="degreeOps" />
          </n-form-item-gi>
          <n-form-item-gi label="职位标签" path="job_tags" :span="24">
            <n-card embedded>
              <n-dynamic-tags v-model:value="form.job_tags" :max="8" />
            </n-card>
          </n-form-item-gi>
          <n-form-item-gi label="职位描述" path="job_description" :span="24">
            <n-input
              v-model:value="form.job_description"
              type="textarea"
              :allow-input="noSideSpace"
              maxlength="1000"
              :autosize="{
                minRows: 4,
                maxRows: 6,
              }"
            />
          </n-form-item-gi>
          <n-gi :offset="20">
            <n-button type="primary" @click="submit">提交招聘信息</n-button>
          </n-gi>
        </n-grid>
      </n-form>
    </n-card>
  </GridPage>

  <JobSelect ref="jobSelectRef" @click-job="handleClickJob"></JobSelect>
</template>

<script setup>
import { GridPage } from '@/components'
import recruiterApi from '@/api/recruiter'
import { useRecruiterStore } from '@/store/modules/recruiter'
import { useForm } from '@/composables'
import { cities, getJobName } from '@/data'
const recruiterStore = useRecruiterStore()
const router = useRouter()
const rules = {
  title: { required: true, message: '此为必填项', trigger: ['blur', 'change'] },
  job_code: { required: true, message: '此为必填项', trigger: ['blur', 'change'] },
  type: { type: 'number', required: true, message: '此为必填项', trigger: ['blur'] },
  address_code: { required: true, message: '此为必填项', trigger: ['blur'] },
  salary_min: {
    required: true,
    message: '此为必填项',
    trigger: ['blur'],
  },
  salary_max: [
    {
      required: true,
      message: '此为必填项',
      trigger: ['blur'],
    },
    {
      trigger: ['input', 'blur'],
      message: '不得低于最低薪资',
      validator: (rule, value) => {
        return parseInt(value) >= parseInt(form.value.salary_min)
      },
    },
  ],
  job_tags: {
    type: 'array',
    required: true,
    message: '至少输入一个标签',
    trigger: ['blur', 'change'],
  },
  education_requirement: {
    type: 'number',
    required: true,
    message: '此为必填项',
    trigger: ['blur'],
  },
}

const [formRef, form, validation] = useForm({})

const degreeOps = [
  { value: 0, label: '中专/中技' },
  { value: 1, label: '大专' },
  { value: 2, label: '本科' },
  { value: 3, label: '硕士' },
  { value: 4, label: 'MBA/EMBA' },
  { value: 5, label: '博士' },
  { value: 6, label: '学历不限' },
]

const typeOps = [
  { value: 0, label: '实习' },
  { value: 1, label: '应届' },
  { value: 2, label: '全职' },
  { value: 3, label: '兼职' },
]

let job_name = computed(() => {
  return getJobName(form.value.job_code)
})

function noSideSpace(value) {
  return !value.startsWith(' ') && !value.endsWith(' ')
}

//设置只允许输入数字
function onlyAllowNumber(value) {
  return !value || /^\d+$/.test(value)
}
//打开职业类别选择框
const jobSelectRef = ref()
function handleOpenJobSelect() {
  jobSelectRef.value.open()
}
//设置点击目标的职业信息
function handleClickJob(job_obj) {
  form.value.job_code = job_obj.job_code
}

async function submit() {
  await validation()
  form.value.recruiter_id = recruiterStore.recruiter.recruiter_id
  form.value.company_id = recruiterStore.recruiter.company_id
  await recruiterApi.saveJobPosting(form.value)
  $dialog.create({
    title: '结果',
    content: '招聘信息提交成功',
    positiveText: '确定',
  })
  form.value.title = null
  form.value.job_code = null
  form.value.type = null
  form.value.address_code = null
  form.value.salary_min = null
  form.value.salary_max = null
  form.value.education_requirement = null
  form.value.job_description = null
}

onMounted(async () => {
  // await recruiterStore.getRecruiter()
  const company_id = recruiterStore.recruiter.company_id
  if (!company_id) {
    $dialog.create({
      title: '请先加入企业',
      content: '您暂未加入任何企业，加入企业后才可发布职位信息',
      positiveText: '加入企业',
      negativeText: '注册企业',
      closable: false,
      maskClosable: false,
      onPositiveClick() {
        router.push('/recruiter/companyJoin')
      },
      onNegativeClick() {
        router.push('/recruiter/companyAuthenticate')
      },
    })
  }
})
</script>
